<template>
    <div class="content">
        <div class="q">
        <div class="price">¥{{ pre.price }}</div>
        <div class="line">
            <p class="left">订单金额</p>
            <p class="right">¥9.99</p>
        </div>
        <div class="line">
            <p class="left">商品名称</p>
            <p class="right">{{pre.name}}</p>
        </div>
        <div class="line">
            <p class="left">创建时间</p>
            <p class="right">{{ new Date().toLocaleString() }}</p>
        </div>
        </div>
        <div class="w">
            <router-link class="logo" to="/">
          <r-logo class="logo" />
        </router-link>
        <div class="pay">请选择支付方式</div>
        <div class="pays">
            <div class="payss">
                <svg t="1677491483126" class="" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="1579">
                    <path
                        d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
                        fill="#15BA11" p-id="1580"></path>
                </svg>
                <p class="text">微信</p>
            </div>
            <div class="payss">
                <svg t="1677491461265" class="icon h-8 mr-2" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1439">
                    <path
                        d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
                        fill="#009FE8" p-id="1440"></path>
                </svg>
                <p class="text">支付宝</p>
            </div>
        </div>
    </div>
    </div>
</template>

<script type="text/javascript">
import Rheaders from "../yun/home/Rheaders.vue"
export default {
    name: "pay",
    data() {
        return {
            pre: 
                { name: '充2小时套餐',price:9.99},  
            
        }
    },
    props: {

    },

    computed: {

    },
    methods: {

    },
    watch: {  //a: function (value, old) { },
    },
    mounted() {
    },
    components: {
        Rheaders
    }
}
</script>
<style lang="scss" scoped>

.content{
    padding: 3rem 1rem 1rem 1rem;
}
    .price {
        font-weight: bold;
        font-size: 2.4rem;
        color: #0aacec;
        margin-bottom: 4rem;
    }

    .line {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #2c383d;
        padding-top: 1rem;
        padding-bottom: 1rem;

        .left {
            font-size: 1rem;
            color: #405760;
        }

        .right {
            font-size: 1rem;
            color: #9eccdf;
        }

    }

    .pay {
        font-weight: bold;
        font-size: 1.2rem;
        color: #ffffff;
        margin: 3rem 0;
    }
.logo{
    display: none;
}

.pays {
    display: flex;
    flex-direction: row;

}

.payss {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 8rem;
    margin-left: 1.3rem;
    padding: 0.3rem;
    background-color: #13283f;
    border-radius: 8px;

    .text {
        width: 400%;
        color: #ffffff;
    }

    svg {
        width: 30rem;
        height: 2.5rem;
    }
}
@media screen and (min-width:660px) {
.content {
    padding: 0rem 1rem 0rem 1rem;
display: flex;
flex-direction: row-reverse;
align-items: center;
 justify-content: space-between;
}
.q{
width: 40%;
 margin-bottom: 5rem;
 margin-right: 260px;
}
.w{
padding-top: 3rem;
margin-left: 100px;
box-shadow: 0 5rem 1rem #0f1528;

height: 100vh;
.logo{
    display: block;
}
}
}
</style>